<template>
	<!-- 隐藏的创建画板 -->
	<div class="bigbigbox bigbig">
		<div class="yincang">
			<div class="creatdraw">
				<div class="crtext">创建画板</div>
				<div class="crfoot">
					<div class="input">
						<input v-model="info.drawname" class="title" type="text" placeholder="标题">
						<select class="fenlei" v-model="info.drawType">
							<option value="分类" class="fl">分类</option>
							<option value="美食" class="fl">美食</option>
							<option value="宠物" class="fl">宠物</option>
							<option value="摄影" class="fl">摄影</option>
							<option value="游戏" class="fl">游戏</option>
							<option value="汽车组件" class="fl">汽车组件</option>
						</select>
					</div>
					<!-- 取消创建画板和创建画板 -->
					<div class="ccreat">
						<!-- 取消 -->
						<div class="discreate" @click="quxiao('discreate')">取消</div>
						<div class="create" @click="submitInfo">创建画板</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted, reactive } from 'vue';
	import { useRouter } from "vue-router";
	let router = useRouter();
	let { proxy } = getCurrentInstance()
	let { proxy: { axios, url } } = getCurrentInstance();
	const value = ref('');
	let info = reactive({
		drawname: '',
		drawType: ''


	});
	let submitInfo = async () => {
		console.log(info, 333333333333);
		let formdata = new FormData();
		for (let key in info) {
			formdata.append(key, info[key]);
			console.log(info[key]);
		};
		const drawname = formdata.get('drawname')
		const DTYPE = formdata.get('drawType')
		console.log(drawname);
		let res = await proxy.$axios("/egg/addraw", { parmas: { drawname, DTYPE } });
		console.log(res, "fffffffffffffffffffffffffffff");
	}


</script>

<style lang="scss" scoped>
	.bigbigbox {
		width: 1872px;
		height: 100%;
		opacity: 0.8;
		background-color: rgb(140, 140, 140);
		position: relative;
		margin: 0 auto;
		position: fixed;
		left: 50%;
		/* display: none; */


		margin-left: -986px;

		.creatdraw {
			width: 480px;
			height: 324px;
			background-color: white;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -240px;
			margin-left: -167px;
			border-radius: 15px;
			border: 1px solid rgb(140, 140, 140);

			.crtext {
				width: 480px;
				height: 72px;
				border-radius: 15px;
				text-align: center;
				line-height: 72px;
				font-size: 20px;
				font-weight: 600;
				color: black;
			}

			.crfoot {
				width: 480px;
				height: 252px;
				border-radius: 15px;

				.input {
					width: 480px;
					height: 120px;
					text-align: center;
					margin-top: 20px;



					.title {
						width: 430px;
						height: 46px;
						border-radius: 10px;
						background-color: white;
						border: 1px solid rgb(140, 140, 140);

						&:focus {
							outline: none;
						}

					}

					.fenlei {
						width: 435px;
						height: 48px;
						border-radius: 10px;
						background-color: white;
						border: 1px solid rgb(140, 140, 140);
						margin-top: 15px;

						&:focus {
							outline: none;
						}
					}
				}

				/* 取消创建画板和确认创建画板 */
				.ccreat {
					width: 432px;
					height: 50px;
					margin: 10px auto;
					display: flex;
					justify-content: end;

					/* 取消 */
					.discreate {
						width: 62px;
						height: 40px;
						border: 1px solid rgb(140, 140, 140);
						text-align: center;
						line-height: 40px;
						margin-top: 5px;
						border-radius: 10px;

						&:hover {
							cursor: pointer;
						}

					}

					.create {
						width: 90px;
						height: 40px;
						background-color: rgb(255, 135, 100);
						text-align: center;
						line-height: 40px;
						margin-top: 5px;
						margin-left: 10px;
						border-radius: 10px;
						color: white;

						&:hover {
							cursor: pointer;
						}
					}

				}

			}
		}
	}
</style>